<template>
	<view class="rui-title">
		<view class="title">{{title}}
		</view>
		<view class="icon" @click="change" v-if="more">
			<view class="icon_box" :class="!status ? 'animate':''">
				<rui-icons icon="add" size="38" color="var(--color)"></rui-icons>
			</view>
		</view>
	</view>
</template>
<script setup>
	defineProps({
		more: Boolean,
		title: {
			type: String,
			default: ""
		}, 
		status: Boolean
	})

	const emits = defineEmits(['change'])
	const change = () => {
		emits('change')
	}
</script>
<style lang="scss" scoped>
	.rui-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		margin-top: 50rpx;

		.icon {
			width: 80rpx;
			height: 50rpx;

			&_box {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
			}

			// .animate {
			// 	animation: rotate infinite 2s linear;

			// }
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		.title {
			padding-left: 10rpx;
			font-size: 40rpx;
			font-weight: bold;
			// font-family: Times New Roman, Times, serif;
			position: relative;

			// &:before {
			// 	content: "";
			// 	display: block;
			// 	position: absolute;
			// 	left: -20rpx;
			// 	top: 5rpx;
			// 	width: 10rpx;
			// 	height: 50rpx;
			// 	background: var(--color);
			// }
		}


	}
</style>